<template>
	<view class="scenceIndex">
		<!-- 	<view class="concern">


		<view class="concernLeft">
			<image src="../../static/img/s3.png" style="width: 200upx;height: 180upx;" class="hotelImg"></image>
		</view>
		<view class="concernRight">
			<text class="hoteltxt">热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店</text>
			<text class="concernNum">5.4人收藏</text>
		</view>
		
	</view> -->

		<view id="cover" @click="isCover" v-if="isShow">
			<view class="changeCityList">
				<text class="changeCityListItem" v-for="item in changeCityList" @click="selectCity(item.name)">
					{{item.name}}
				</text>
			</view>
		</view>


		<view class="scenceIndexSearch">
			<view class="">
				<image src="../../static/img/icon_home_search.png" style="width: 30upx;height: 32upx;position: absolute;top: 60upx;left: 64upx;"
				 class=""></image>
				<input class="uni-input SearchInput" v-model="searchCityName" placeholder="" />
				<text class="" style="position: absolute;top: 55upx;right: 70upx;color: #2B91E2;z-index: 22;" @click="searchCity">搜索</text>
			</view>
			<!-- 				<view class="" style="position: absolute;top: 60upx;right: 20upx;" @click="changeCity">
					<image src="../../static/img/icon_scence_more.png" style="width: 20upx;height: 10upx;margin-right: 10upx;" class=""></image>
						{{parentDate.name}}
				</view> -->
		</view>
		<view class="">
			<view class="cityListTitle">
				精选攻略
			</view>
			<view class="cityList">
				<view class="cityListItem" v-for="item in cityList">
					<view class="fs-20" style="z-index: 1 ;padding: 10upx;background: #F89931;color:white;display:inline-block;position: absolute;top:30upx;left: 25upx;border-radius:2upx;">
						{{item.pageviews}}浏览
					</view>
					<view class="deliciousListTag">
						<view class="deliciousListTagItem" v-for="(child, _index1) in item.promptLabel" v-if="child != ''" :key="_index1"
						 style="z-index: 1 ;padding: 10upx;background: #FE5A34;color:white;display:inline-block;position: absolute;top:30upx;left:130upx;border:0">
							{{child}}
						</view>
					</view>
					<image :src="item.variousImg" style="width: 700upx;height: 400upx;" class="noDataImg"></image>
					<view class="cityListItemBom">
						<!-- 						<view class="cityListItemName">
								{{item.variousName}}
						</view> -->


					</view>
				</view>
			</view>
		</view>
		<view class="">
			<view class="fz15 h-c tab-wrapper">
				<view class="inline-block tab" :class="tabVal == 0 ? 'active' : ''" @click="changetab(0)">综合排序</view>
				<view class="" style="border-right: 1px solid #e6e6e6;height: 35upx;"></view>
				<view class="inline-block tab" :class="tabVal == 1 ? 'active' : ''" @click="changetab(1)">推荐度</view>
			</view>
			<view class="sortListwrapper">
				<view class="sortList" v-for="item in sortList">
					<image class="img" :src="item.strategyImg" style="width: 100%;height: 200upx;;"></image>

					<view class="sortListItemName">
						{{item.strategyName}}
					</view>

					<view class="sortListItemNum">

						<text class="fs-28" style="border-right: 1px solid #000000;padding-right: 20upx;">{{item.addressCity}}</text>
						<text class="fs-15 fw-bold" style="margin-left: 20upx;">{{item.browseNum}}浏览</text>
					</view>
					<view class="deliciousListTag">
						<view class="deliciousListTagItem" v-for="(child, _index1) in item.businessLabel" v-if="child != ''" :key="_index1">
							{{child}}
						</view>
					</view>

				</view>
				<view class="fz14 tc h-8 signtips">{{tips}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function(option) {

		},
		data() {
			return {
				// parentDate: '',
				tabVal: 0,
				page: 1,
				tips: '正在加载...',
				isOnReachBottom: false,
				sortList: [],
				cityList: [],
				changeCityList: [],
				searchCityName: '',
				isShow: false
			}
		},
		components: {
		},

		onShow() {
			this.getSort();
			this.getData()
		},
		onReachBottom: function() {
			this.page++
			if (this.isOnReachBottom) {
				this.changetab(this.tabVal, true)
			}
		},
		methods: {
			searchCity() {
				console.log('0000')
				this.getData()
			},
			isCover() {
				this.isShow = false;
			},
			selectCity(name) {
				console.log(name)
				// this.parentDate.name = name;
				this.getData();
				this.isShow = false;
				document.body.style.overflow = "auto";
			},
			// 			changeCity(){
			// 				this.isShow = true;
			// 				document.body.style.overflow="hidden";
			// 				console.log(this.isShow)
			// 				this.getCity()
			// 			},
			//获取数据
			getCity() {
				this.$postApi(this.$path.GET_CITY_LIST, {
					parentId: "14000",
				}).then(data => {
					if (data.data.success) {
						this.changeCityList = data.data.reListData;
					}
				})
			},
			//获取数据
			getData() {
				this.$postApi(this.$path.GET_STRATEGY_LIST, {
					strategyType: '',
					strategyId: '',
					addressCity: '',
					page: this.page,
					rows: 8,
					strategyName: this.searchCityName,
					descType: this.tabVal
				}).then(data => {
					if (data.data.success) {
						console.log(data, '1111')
						if (data.data.rows.length == 0 && this.page == 1) {
							this.sortList = []
						}
						if (data.data.rows.length !== 0) {
							for (let i = 0; i < data.data.rows.length; i++) {
								// data.data.rows[i].img = this.pub.fmtImgUrl(data.data.rows[i].img);
								data.data.rows[i].businessLabel = data.data.rows[i].businessLabel.split("；");
							}
							if (this.page == 1) {
								this.sortList = []
							}
							this.tips = ''
							this.isOnReachBottom = true
							this.sortList = this.sortList.concat(data.data.rows)
						} else {
							this.tips = '没有更多数据了'
							this.isOnReachBottom = false
						}
						// this.sortList = data.data.rows

					}
				})
			},
			//获取数据
			getSort() {
				this.$postApi(this.$path.QUERY_SHOW_CHILD_INFO, {
					positionId: 11
				}).then(data => {
					if (data.data.success) {
						console.log(data, '22')

						for (let i = 0; i < data.data.items.length; i++) {
							// data.data.rows[i].img = this.pub.fmtImgUrl(data.data.rows[i].img);
							data.data.items[i].promptLabel = data.data.items[i].promptLabel.split("；");
						}
						this.cityList = data.data.items
						// this.sortList = data.data.rows
					}
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			changetab(val, isPush) {
				if (!isPush) {
					this.tabVal = val
					this.page = 1
				}
				// if (!isPush) {
				// this.tabVal = val
				this.getData()
				// this.page = 1
				// }
				// 				switch (this.tabVal) {
				// 					case 0:
				// 						this.searchSpotByC()
				// 						break;
				// 					case 1:
				// 						this.searchHotelByC()
				// 						break;
				// 					case 2:
				// 						this.getOrderList()
				// 						break;
				// 					default:
				// 						break;
				// 				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	#cover {
		position: fixed;
		left: 0px;
		top: 90px;
		background-color: #000;
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		// filter:alpha(opacity=60);   
		// display:none; 
		z-Index: 20;

		.changeCityList {
			// position:absolute;left:0px;top:0px;
			background-color: white;
			width: 100%;
			height: 200upx;
			opacity: 1;
			z-Index: 21;

			// display: flex;
			// filter:alpha(opacity=0); 
			.changeCityListItem {
				border: 1upx solid #16BF5A;
				color: #16BF5A;
				word-wrap: break-all;
				margin: 20upx;
				margin-top: 10upx;
				padding: 5upx;
				display: inline-block;
			}
		}
	}

	.scenceIndexSearch {
		position: fixed;
		top: 50upx;
		width: 100%;
		height: 130upx;
		// padding-bottom: 50upx;
		z-index: 10;
		background: white;

		.SearchInput {
			padding-left: 50upx;
			width: 650upx;
			box-sizing: border-box;
			box-shadow: 0px 3px 20px 0px rgba(140, 140, 140, 0.26);
			margin: 50upx;
		}
	}

	.cityListTitle {
		font-size: 36upx;
		font-weight: bold;
		margin: 120upx 10upx 20upx 10upx;
	}

	.cityList {

		display: flex;
		overflow-x: scroll;

		.cityListItem {
			position: relative;
			// display: flex;
			// flex-direction: column;
			margin: 10upx;
			// padding: 0upx 34upx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 3px 20px 0px rgba(140, 140, 140, 0.26);
			border-radius: 10upx;
			// height: 235upx;
			box-sizing: border-box;

			.cityListItemBom {
				margin: 10upx;
				padding-bottom: 20upx;

				.cityListItemName {
					font-size: 36upx;
					font-weight: bold;
				}
			}

		}
	}

	.sortListwrapper {
		display: flex;
		width: 100%;
		height: 100%;
		flex-wrap: wrap;
		justify-content: center;

		.sortList {
			// display: flex;
			margin: 20upx;
			width: 40%;
			border: 1px solid #cccccc;

			.sortListRight {
				width: 100%
			}

			.sortListItemName {
				font-size: 36upx;
				font-weight: bold;
				margin: 10upx;
			}

			.sortListItemNum {
				// font-weight: bold;
				margin: 10upx;
				// margin-top: 20upx;
			}

			.sortListItemAdr {
				margin: 10upx 10upx 20upx 10upx;
			}

			.sortListItemTicket {
				margin: 10upx;
				padding-top: 20upx;
				border-top: 1upx dashed #cccccc;
				display: flex;
				justify-content: space-between;

				.sortListItemTicketPrice {
					color: #FE5A34;
				}
			}
		}
	}

	.deliciousListTag {
		display: flex;
		margin-bottom: 10upx;
		margin-left: 10upx;

		.deliciousListTagItem {
			border: 1upx solid rgba(255, 180, 21, 1);
			border-radius: 4upx;
			font-size: 20upx;
			font-weight: 400;
			color: rgba(255, 180, 21, 1);
			padding: 6upx 12upx;
			margin-right: 14upx;
		}
	}

	.tab-wrapper {
		display: flex;
		justify-content: space-around;
		padding: 20upx 40upx 0upx;
		margin-bottom: 20upx;
		// padding-bottom: 30upx;
		border-bottom: 1upx solid #e6e6e6;

		.tab {
			padding-bottom: 12upx;
			border-bottom: 4upx solid transparent;

			&.active {
				border-bottom-color: #2B91E2;
			}
		}
	}
</style>
